/*
 * @Author: zhouzhonglou z.zhou@herin.ai
 * @Date: 2022-06-29 10:06:35
 * @LastEditors: zhouzhonglou z.zhou@herin.ai
 * @LastEditTime: 2022-06-29 11:40:43
 * @FilePath: \hll-control-p2-web\src\directives\showTips.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import Vue from 'vue';

const showTips = Vue.directive('showTips', {
  componentUpdated(el) {
    const curStyle = window.getComputedStyle(el, '');
    const textSpan = document.createElement('span');

    // 确保与当前样式相同
    textSpan.style.fontSize = curStyle.fontSize;
    textSpan.style.fontWeight = curStyle.fontWeight;
    textSpan.style.fontFamily = curStyle.fontFamily;

    document.body.appendChild(textSpan);
    textSpan.innerHTML = el.innerText;

    if (textSpan.offsetWidth > el.offsetWidth) {
      el.style.overflow = 'hidden';
      el.style.textOverflow = 'ellipsis';
      el.style.whiteSpace = 'nowrap';

      el.onmouseenter = function() {
        el.setAttribute('title', el.innerText);
      };

      el.onmouseleave = function() {
        el.removeAttribute('title');
      };
    }
    document.body.removeChild(textSpan);
  }
});

export { showTips };
